<template>
  <el-container>
    <el-header class="head">
      <div class="head-user">
        <img class="avatar" :src="img1" width="61" height="61">
        <span class="user_name">早安,{{name}},祝你开心每一天!</span>
      </div>
      <div class="head-project">
        <div class="project-item">
          <span class="project-name">系统项目数</span>
          <span class="project-num">{{ list3.length}}</span>
        </div>
        <div class="project-item">
          <span class="project-name">客户数</span>
          <div>
            <span style="font-size:28px;">{{ list2.length}}</span>
            <span>/</span>
            <span style="font-size:15px;color:#999">{{ list2.length}}</span>
          </div>
        </div>
        <div class="project-item">
          <span class="project-name">问题反馈数</span>
          <span class="project-num">{{ list1.length}}</span>
        </div>
      </div>
    </el-header>

    
      <div class="main-nav" style="margin-top:1%">
        <el-badge is-dot class="item" style="margin-left:1%">进行中的项目</el-badge>
        <el-badge :value="list1.length" class="item" style="margin-left:85%" type="primary">
          <el-button size="small">
            <router-link to="/all">全部项目</router-link>
          </el-button>
        </el-badge>
      </div>
      <el-main>
        <div class="body">
      <div class="content">
        <div class="content-item" v-for="item in list1a" :key="item">
          <div class="text">
            <img :src=img1 width="17" height="17">
            <sapn class="title">开发员：{{item.ftechnician}}</sapn>
          </div>

          <div class="message">
            <el-popover
              placement="top-start"
              title="详细信息"
              width="250"
              trigger="click"
              :content="item.fopinions"
            >
              <div class="tip" slot="reference">{{item.fopinions}}</div>
            </el-popover>
          </div>
          <div class="time">
            <span>录入员：{{item.fentryclerk}}</span>
            <span>{{ formatTime(item.finputtime)}}</span>
          </div>
        </div>
      </div>
      </div>
    </el-main>
    <el-footer>
      <div class="unfinish">
        <span class="problem">问题总数</span>
        <span class="num">{{ list1.length}}</span>
        <el-steps :space="200" :active="1" finish-status="success" >
          <el-step title="已解决" :description="list1b.length"></el-step>
          <el-step title="未解决" :description="list1a.length"></el-step>
        </el-steps>
        <hr>
        <div>
          <span style="color:#999">历史问题总数</span>
          <span>{{ list1.length}}</span>
        </div>
      </div>
     
      <el-tag type="success" style="margin-left:20px;" >已解决的问题</el-tag>
 
      <div class="finish" style="margin-left:-110px;margin-top:40px;">
        <div class="content">
          <div class="content-item" v-for="item in list1b" :key="item" >
            <div class="text">
              <img :src=img2 width="17" height="17">
              <sapn class="title">开发员：{{item.ftechnician}}</sapn>
            </div>

            <div class="message">
              <el-popover
                placement="top-start"
                title="详细信息"
                width="250"
                trigger="click"
                :content="item.fopinions"
              >
                <div class="tip" type="info" slot="reference">{{item.fopinions}}</div>
              </el-popover>
            </div>
            <div class="time">
              <span>录入员：{{item.fentryclerk}}</span>
              <span>{{ formatTime(item.finputtime)}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import img1 from "@/views/daohan1/Statistics/握手.jpg";
import img2 from "@/views/daohan1/Statistics/test(1).png";
import { getUser } from "@/utils/auth";
import  { formatTime, parseTime }   from '@/utils/index'
import { getFeedbacks, getCustomers, getSystems } from "@/api/Statistics";

export default {
  data() {
    return {
      a:1,
      img1,
      img2,
      formatTime,
      parseTime,
      list1: "",
      list2: "",
      list3: "",
      timeNow:"",
      list1a:[],//进行中的问题
      list1b:[],
      name:""//已结束的问题
    };
  },

  mounted() {
    this.getdata1();
    this.getdata2();
    this.getdata3();


  },

  methods: {
    
    getdata1() {
      //获取问题表
      let data = async () => {
        try {
          this.name=getUser().name;
          let result = await getFeedbacks();
          if (result) {
            this.list1 = result;
            this.loading = false;
            console.log(this.time)
            for(var i = 0;i<this.list1.length;i++){
               if(this.list1[i].state=="进行中"){
                
                  this.list1a.push(this.list1[i])
                
               }else{
                 this.list1b.push(this.list1[i])
                 console.log(this.list1b)
               }
            }
          }
        } catch (err) {
          
        }
      };
      data();
    },
    getdata2() {
      //获取客户表
      let data = async () => {
        try {
          let result = await getCustomers();
          if (result) {
            this.list2 = result;
            this.loading = false;
          }
        } catch (err) {
          console.log(err);
        }
      };
      data();
    },
    getdata3() {
      //获取系统信息表
      let data = async () => {
        try {
          let result = await getSystems();
          if (result) {
            this.list3 = result;
            this.loading = false;
          }
        } catch (err) {
          console.log(err);
        }
      };
      data();
    },

  }
};
</script>

<style lang="sass" scoped>

*::-webkit-scrollbar 
  width: 4px     

*::-webkit-scrollbar-thumb 
  border-radius: 10px
  background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%)

*::-webkit-scrollbar-track 
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)
  border-radius: 10px
  background: #EDEDED

.content::-webkit-scrollbar-thumb 
  border-radius: 10px
  background-image: linear-gradient( 135deg, #FD6E6A 10%, #FFC600 100%) 
  

.el-container
  padding: 10px

.head
  display: flex
  justify-content: space-between

.head-user
  display: flex
  align-items: center
  .avatar
    border-radius: 31px
  .user_name
    margin-left: 15px
    font-size: 17px

.head-project
  display: flex
  .project-item
    display: flex
    flex-direction: column
    align-items: center
    margin-left: 20px
    line-height: 30px
    .project-name
      color: #999
      font-size: 13px
    .project-num
      font-size: 28px  
.body
 height: 330px
.el-main, .finish,
  width: 102%
  margin-top: 10px
  overflow-x: hidden
  .main-nav,
    display: flex
    justify-content: space-between
    align-items: center
    margin-bottom: 10px
  .content
      display: grid
      grid-template-columns: repeat(5,1fr)
      .content-item
        cursor: pointer
        color: #999  
        padding: 10px
        padding-top: 0px
        // border: 1px solid #eee
        .title
          margin-left: 10px
          font-size: 13px
          color: #000
        .message 
          height: 70px 
          overflow-y: scroll
          overflow-x: hidden
          background-color: #f4f4f5
          margin: 6px 0
          border-radius: 8px
          font-size: 12px
          .tip
            height: 100%
            color: #909399
            border: 1px solod rgba(64,158,255,.2)
            box-sizing: border-box
            line-height: 31px
            padding: 10px
        .time
          display: flex
          justify-content: space-between
          font-size: 10px

.el-footer
  display: flex
  .unfinish
    width: 50%
    padding: 10px
    .problem,
      display: block
      font-size: 14px
      color: #999
    .num
      display: block
      margin: 10px 10px 
      font-size: 30px
  .finish
  
    height: 200px
    .content
      display: grid
      grid-template-columns: repeat(3,1fr)
  
</style>

